<template>
  <div>
    <div style="border: 2px solid #E6E6E6 ;
            background-color: white;width: 500px;height: 300px">
      <vue-esign ref="esign" :width="500" :height="300" :isCrop="isCrop"
                 :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor"/>
    </div>
    <el-button @click="handleReset">清空画板</el-button>
    <el-button @click="handleGenerate('save')">保存</el-button>
    <el-button @click="handleGenerate('save1')">保存为模板</el-button>
    <el-button @click="handleSignature">使用保存签名</el-button>
    <el-button @click="handleDownload">下载</el-button>
  </div>
</template>

<script>
import axios from "axios";
import request from "@/utils/request";
export default {
  name: "SignTest",
  props: {
    currentSignType: String
  },

  data() {
    return {
      user: {},
      props: ['user'],
      lineWidth: 6,
      lineColor: 'red',
      bgColor: '',
      resultImg: '',
      resultImgurl: '',
      isCrop: false,
      signType: ''
    };
  },

  mounted() {
    this.signType = this.currentSignType;
    console.log(this.signType);
  },

  created() {
    let userStr = localStorage.getItem("user") || "{}"
    this.user = JSON.parse(userStr)
  },

  methods: {

    //清空画板
    handleReset() {
      this.$refs.esign.reset()
    },

    // 保存或保存为模板
    async handleGenerate(val) {
      try {
        // 生成 base64 格式的图片
        // 将 base64 格式的图片赋值给 this.resultImg
        this.resultImg = await this.$refs.esign.generate();
        // 调用 uploadImage 函数，上传图片并获取返回的图片地址
        const url = await this.uploadImage(this.resultImg,val);
        // 触发父组件事件，将图片地址传递给父组件
        this.$emit('updateSignImg', url, this.signType);
      } catch (err) {
        // 处理错误情况，比如画布没有签字或上传失败时
        this.$emit('updateSignImg', '', this.signType);
      }
    },

    // 定义一个函数，用于上传图片并获取返回的图片地址
    async uploadImage(base64Img,val) {
      // 调用 base64ImgtoFile 函数，将 base64Img 转换为 File 对象
      let imgFile = this.base64ImgtoFile(base64Img);

      // 创建 FormData 对象，用于上传文件
      const formData = new FormData();
      // 添加 file 属性，并指定文件名
      formData.append('file', imgFile);

      // 设置 Content-Type 头部为 multipart/form-data
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      };
      //保存方法
      if (val.toString()=='save') {
        // 发送 POST 请求，上传图片并获取返回的图片地址
        const response = await axios.post('/api/related-file/uploadSign', formData, config);
        // 解构返回数据中的 code, data 和 message 属性
        const {code, data, message} = response.data;
        // 判断 code 是否为 200，表示成功
        if (code === '200') {
          // 判断 data 是否存在，并且有 url 属性
          if (data && data.url) {
            // 更新图片地址和名称
            this.resultImgurl = data.url;
            this.resultImgname = data.name;
            // 拼接完整的图片地址，使用模板字符串
            // 返回图片地址
            return `api/file/download/${this.resultImgurl}`;
          } else {
            // 如果 data 不存在或没有 url 属性，抛出一个错误对象，包含 message 属性
            throw new Error('图片上传失败，请重试！');
          }
        } else {
          // 如果 code 不为 200，抛出一个错误对象，包含 message 属性
          throw new Error(message || '图片上传失败，请重试！');
        }
      }
      //保存为模板方法
      else{
        // 创建 FormData 对象，用于上传文件
        const file = new FormData();
        // 添加 file 属性，并指定文件名
        file.append('file', imgFile);
        file.append("account",this.user.account);
        // 设置 Content-Type 头部为 multipart/form-data
        // 发送 POST 请求，上传图片并获取返回的图片地址
        const response = await axios.post('/api/signTemplate/save', file, config);
        // 解构返回数据中的 code, data 和 message 属性
        const { code, data, message } = response.data;
        // 判断 code 是否为 200，表示成功
        if (code === '200') {
          // 判断 data 是否存在，并且有 url 属性
          if (data && data.filePath) {
            // 更新图片地址和名称
            this.resultImgurl = data.filePath;
            // 拼接完整的图片地址，使用模板字符串
            // 返回图片地址
            return `api/file/download/${this.resultImgurl}`;
          } else {
            // 如果 data 不存在或没有 url 属性，抛出一个错误对象，包含 message 属性
            throw new Error('图片上传失败，请重试！');
          }
        } else {
          // 如果 code 不为 200，抛出一个错误对象，包含 message 属性
          throw new Error(message || '图片上传失败，请重试！');
        }
      }
    },

    //使用保存签名
    handleSignature() {
      request.get("/signTemplate/getSign?account="+this.user.account).then(res=>{

        if (res.code == '200') {
          if (res.data && res.data) {
            this.resultImgurl = res.data;
            const url=`api/file/download/${this.resultImgurl}`
            console.log(url)
            try {
              this.$emit('updateSignImg', url, this.signType);
            } catch (err) {
              // 处理错误情况，比如画布没有签字或上传失败时
              this.$emit('updateSignImg', '', this.signType);
            }
          }
        }

      })
    },

    //下载
    handleDownload() {
      const imgUrl = this.resultImg;
      // 如果浏览器支持msSaveOrOpenBlob方法（也就是使用IE浏览器的时候），那么调用该方法去下载图片
      if (window.navigator.msSaveOrOpenBlob) {
        const bstr = atob(imgUrl.split(',')[1]);
        let n = bstr.length;
        const u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        const blob = new Blob([u8arr]);
        window.navigator.msSaveOrOpenBlob(blob, 'filename.jpg');
      } else {
        // 这里就按照chrome等新版浏览器来处理
        const a = document.createElement('a');
        a.href = imgUrl;
        a.setAttribute('download', 'sign.jpg');
        a.click();
      }
      this.$refs.esign.generate().then(res => {
        this.resultImg = res //把base64赋给img
        // 这里就按照chrome等新版浏览器来处理
        var imgFile = this.base64ImgtoFile(this.resultImg);
        const a = document.createElement('a');
        a.href = this.resultImg;
        a.setAttribute('download', 'sign.jpg');
        a.click();
      }).catch(err => {
        alert(err) // 画布没有签字时会执行这里
      })
    },

    // 定义一个函数，用于显示错误信息
    showError(err) {
      // 判断 err 是否有 message 属性，如果有则使用它作为错误信息，否则使用默认的错误信息
      const msg = err.message || '发生了一些错误，请重试！';
      // 调用 alert 函数，提示用户错误信息
      alert(msg);
    },

    base64ImgtoFile(dataurl, filename = 'sign') {
      let arr = dataurl.split(',')
      let mime = arr[0].match(/:(.*?);/)[1]
      let suffix = mime.split('/')[1]
      let bstr = atob(arr[1])
      let n = bstr.length
      let u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], `${filename}.${suffix}`, {
        type: mime
      })
    },

  }
}
</script>

<style scoped>

</style>